<template>
  <div>
    <pt-search
      :params="params"
      :config="config"
      label-width="110px"
      @search="search"/>
    <pt-table
      :params="params"
      :columns="columns"
      :dataSource="tableData"
      :options="options"
      :fetch="getTableList"
      :pagination="pagination" />
  </div>
</template>
<script>
  export default {
    data() {
      return {
        config: [ // 搜索
          { key: "agentIds", type: "agentList", label: "区域" },
          { key: "name", type: "input", label: "商家名称", placeholder: "请输入商家名称" },
          { 
            key: "mainClassId", type: "cascader", label: "品类", placeholder: "选择商家分类",
            classlistAlias:{ children: 'subList', value: "id", label: "name"},
            classlist: [] // 分类列表
          },
          { key: "status", type: "select", label: "营业状态", placeholder: "请选择营业", 
            option: [{ label: "正在营业", id: "0" }, { label: "暂停营业", id: "1" }]
          },
          { key: "page", type: "button",
            group: [
              { name: "查看", type: "primary", onClick: () => { } },
              { name: "重置",  type: "info", onClick: () => this.reset() }
            ]
          }
        ],
        columns: [  // 表单配置
          { prop: "name", label: "商家名称", minWidth: 160, align: "center" },
          { prop: "mobile", label: "联系人信息", minWidth: 160, align: "center" },
          { prop: "inStockNum", label: "在售商品数量", minWidth: 160, align: "center" },
          { prop: "dropOffNum", label: "下架商品数量", minWidth: 120, align: "center" },
          {
            label: "经营品类", minWidth: 160, align: "center",
            render: row => {
              return <span>{this.capitalize(row.mainClassName,row.subClassName1,row.subClassName2)}</span>;
            }
          },
          {
            label: "营业状态", minWidth: 100, align: "center",
            render: row => {
              return <span>{row.statu=='0'?'正在营业':'暂停营业'}</span>;
            }
          },
          { button: true, label: "操作", width: 100, fixed: "right",
            group: [
              { name: "编辑商品",  type: "primary", plain: true, onClick: row => this.$router.push({
                path: '/main/comdty/check', query: { id:row.id }
              }) }
            ]
          }
        ],
        pagination: { total: 0, page: 0, size: 10, curPage: 1 }, // 分页
        options: { // 表单外观
          mutiSelect: false, //  多选则 mutiSelect
          index: false, // 显示序号
          loading: false, // 表格动画
          initTable: true // 是否一挂载就加载数据
        },
        isloadingTable: false,  //表单等待
        params: {
          page: 0,
          size: 10,
          name: '',    //商家名称
          status: '',  //营业状态
          mainClassId: [], //分类
          agentIds: [] //区域
        },
        tableData: [], //表单数据
      }
    },
    methods: {
      search() { // 搜索
        this.pagination.curPage = 1
        this.pagination.page = 0
        this.getTableList()
      },
      reset() { // 重置
        this.pagination.curPage = 1
        for (const key in this.params) {
          if (key === "page") {
            this.pagination.page = 0
          } else if (key === 'size') {
            this.pagination.size = 10
          } else if (key === 'agentIds' || key ==='mainClassId') {
            this.params[key] = []
          } else {
            this.params[key] = ""
          }
        }
        this.getTableList()
      },
      getCategoryList() {//获取分类数据
        this.$http.get('/server/businessType/select', {headers: {isCancel: true}}).then(res => {
          if (res.data.success) {
            const arr = res.data.data || []
            arr.forEach((item, index) => {
              if (item.subList.length == 0) {
                delete this.classlist[index]
              } else {
                item.subList.forEach((list, index1) => {
                  delete list.subList
                })
              }
            })
            this.config[2].classlist = arr
          }
        })
      },
      getTableList() {  //获取商家列表
        this.options.loading = true
        let params = { ...this.params }
        params.mainClassId = params.mainClassId.length > 0 ? params.mainClassId[1] : ''
        params.agentIds = params.agentIds.length > 0 ? params.agentIds.join(',') : ''
        params.page = this.pagination.page
        params.size = this.pagination.size
        this.$http.get('/server/business/businessWithGoods?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data.list || []
            this.pagination.total = res.data.data.total
          }
        }).finally(() => { this.options.loading = false })
      },
      capitalize(t1, t2, t3) {  //过滤分类
        let arr = [t1, t2, t3];
        arr.forEach((item, index) => {
          if (!item) arr.splice(index, 1)
        })
        return arr.length > 0 ? arr.join('、') : ''
      }
    },
    mounted() {
      this.getCategoryList()
    }
  }
</script>

<style scoped>

</style>
